@charset "utf-8";
@import "reset";
@import "utils";
body {
    overflow: hidden;
}

.index-web {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to top, #a69c8d, #dbd7cf, #d2cec3);
    background: -webkit-linear-gradient(to top, #a69c8d, #dbd7cf, #d2cec3);
    //  电小二logo
    .logo {
        width: r(202);
        height: r(60);
        margin-top: r(20);
        margin-left: r(32);
        @include aImg;
    }
    //  广告语
    .titie1 {
        width: r(468);
        //      width: r(528);
        margin: 0 auto;
        margin-top: r(60);
        .yuan {
            width: r(50);
            height: r(50);
            border-radius: 50%;
            background: white;
            display: inline-block;
            text-align: center;
            font-size: r(45);
            line-height: r(50);
            color: #dcd8d0;
            vertical-align: middle;
        }
        .isnot {
            width: r(400);
            height: r(44);
            display: inline-block;
            @include aImg;
            vertical-align: middle;
            animation: bounceInDown .8s;
        }
        .permanence {
            width: r(468);
            //          width: r(528);
            height: r(99);
            margin: 0 auto;
            margin-top: r(24);
            overflow: hidden;
            position: relative;
            animation: zoomIn 1.5s;
            img {
                width: 100%;
                position: absolute;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
    }
    //  图片展示
    .section {
        width: 100%;
        height: r(439);
        position: relative;
        margin-top: r(30);
        .Img {
            width:44%;
            height: r(130);
            font-size: 0;
            position: absolute;
            top: 7%;
            left: 42%;
            img{
                width: 100%;
                height: 100%;
            }
//          
                .dianchi {
                    height: r(40);
                    width: 36%;
                    background: url(../img/index/dainchi6.png) no-repeat;
                    background-size: 100% r(40);
//                  line-height: r(40);
                    padding-left: 1%;
                    position: absolute;
                    left: 56%;
                    top: r(42);
                    div {
                        display: none;
                        width: 14%;
                        height: r(30);
                        border-radius: r(10);
                        background: #42d800;
                        margin-left: 3%;
                        margin-top: r(6);
                    }
                }
//          }
        }
        .inpone {
            position:absolute;
            width: 80%;
            height: r(320);
            left: 10%;
            top:28%;
            img{
                width: 100%;
            }
           
        }
    }
    //  菜单
    .caidan {
        width: r(500);
        height: r(98);
        margin: 0 auto;
        text-align: center;
        font-size: r(50);
        color: white;
        margin-top: r(60);
        .jinru {
            width: r(217);
            height: r(98);
            border-radius: r(15);
            float: left;
            border: 1px solid white;
            overflow: hidden;
            position: relative;
            img {
                position: absolute;
                width: 87%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
        .guize {
            width: r(217);
            height: r(98);
            border-radius: r(15);
            float: right;
            border: 1px solid white;
            overflow: hidden;
            position: relative;
            img {
                position: absolute;
                width: 87%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
    }
    //  游戏规则内容
    .play-conten {
        width: r(450);
        overflow: hidden;
        border-radius: r(15);
        background: rgba(18, 17, 16, .8);
        position: absolute;
        top: -9999px;
        bottom: -9999px;
        left: -9999px;
        right: -9999px;
        margin: auto;
        font-size: r(20);
        color: white;
        display: none;
        transform-origin: center;
        transition: height .5s; 
        .chahao {
            width: r(35);
            height: r(35);
            border-radius: 50%;
            position: absolute;
            right: r(15);
            top: r(15);
            overflow: hidden;
            img {
                position: absolute;
                width: 100%;
                top: -9999px;
                bottom: -9999px;
                left: -9999px;
                right: -9999px;
                margin: auto;
            }
        }
        .youziguize2 {
            width: r(187);
            height: r(60);
            margin: 0 auto;
            border: 1px solid white;
            border-radius: r(10);
            font-size: r(32);
            text-align: center;
            line-height: r(70);
            letter-spacing: r(5);
            margin-bottom: r(15);
        }
        p {
            line-height: r(40);
            span {
                color: #ffa800;
            }
        }
    }
    .fangda {
        animation: suoxiao .5s linear both;
    }
    @keyframes suoxiao {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }
}